<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fileReader使用</title>
</head>
<body>
    <form action="">
        <input type="file" name="file" id="myFile" onchange="ChangeFilePrev()">
        <input type="submit" value="提交">
    </form>
    <img src="" alt="">

    <script>
        function ChangeFilePrev() {
            // 1. 创建文件读取对象
            var reader = new FileReader();

            // 2. FileReader：读取文件内容
            /**
             * readAsText：读取文本文件返回文本字符串，默认为utf-8
             * readAsBinaryString：读取文本文件返回二进制字符串，用于存储数据而不是用于读取文件展示给用户看
             * readAsDataURL：读取文本文件返回base64编码的字符串格式
            */
            var fileElement = document.querySelector("#myFile").files;
            reader.readAsDataURL(fileElement[0])
            
            // 3. 将读取后的文件实时更新img展示
            // FileReader提供一个完整的事件模型，用于捕获读取文件的状态
            /**
             * onboard: 读取文件·中断·触发
             * onerror：读取文件中断·失败·触发
             * onload：读取·成功·触发
             * onloadend：读取·完成·触发，无论成功还是失败
             * onloadstart：·开始·读取时触发
             * onprogress：读取文件过程中持续触发
            */
            reader.onload = function () {
                document.querySelector("img").src = reader.result;
            }
        }
    </script>
</body>
</html>
